<template>
<!--  -->
<!-- 自定义组件，批量移动的目录列表弹窗 -->
<!--  -->
  <div>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      :showCancel="false"
      width="400px"
      @close="dialogConfig.show = false">
        <!-- 目录导航 -->
        <div class="navigation-panel">
            <!-- :watchPath: 传递的参数，是否监听路由 -->
            <Navigation ref="navigationRef" @navChange="navChange" :watchPath="false"></Navigation>
        </div>

        <!-- 目录列表 -->
        <div class="folder-list" v-if="folderList.length > 0">
            <div class="folder-item" v-for="item in folderList" @click="selectFolder(item)">
                <Icon :fileType="0"></Icon>
                <span class="file-name">{{ item.fileName }}</span>
            </div>
        </div>
        <!-- 无目录列表时 -->
        <div v-else class="tips">
            移动到<span>{{ currentFolder.fileName }}</span>目录
        </div>
      </Dialog>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch } from "vue";
const { proxy } = getCurrentInstance();

const api = {
    loadAllFolder: "/file/loadAllFolder",
}

//弹窗属性
const dialogConfig = reactive({
    show: false,   //false为关闭弹窗
    title: "移动",
    buttons: [
        {
          type: "primary",
          text: "移动到此",
          click: (e) => {
            folderSelect();       //移动文件 
          },
        },
    ],
});

const filePid = ref("0");        //父级id
const folderList = ref([]);      //可当做移动目的地的目录列表
const currentFileIds = ref({});  //需处理的文件id
const currentFolder = ref({});   //当前目录

//打开弹窗 由父组件 /main/Main.vue 调用
const showFolderDialog = (currentFolder) => {
    dialogConfig.show = true;
    currentFileIds.value = currentFolder;  //父组件传递过来的是当前所在目录
    loadAllFolder();
};

//关闭弹窗 由父组件 /main/Main.vue .moveFolderDone方法 调用
const close = () => {
    dialogConfig.show = false;
}

defineExpose({ showFolderDialog, close });   //是Vue3中的一个新特性,它允许组件将其内部的数据和方法暴露给父组件


//查询可当做移动目的地的目录
const loadAllFolder = async () => {
    let result = await proxy.Request({
        url: api.loadAllFolder,
        params: {
            filePid: filePid.value,                 //父id
            currentFileIds: currentFileIds.value,   //排除查询的目录id
        },
    });
    if (!result) {
        return;
    }
    folderList.value = result.data.fileInfoList;
};


/**
 * 选择目的地目录
 */
const navigationRef = ref();
const selectFolder = (data) => {
    navigationRef.value.openFolder(data);
};


/**
 * 弹窗的“移动到此”按钮
 */
const emit = defineEmits(["folderSelect"]);  //子组件通过触发父组件/main/Main.vue的事件，并将参数传递到父组件
const folderSelect = () => {
    emit("folderSelect", filePid.value); //filePid（此时为被选中的目的地目录）为参数
};


/**
 * 所在目录（导航）改变回调, 由子组件 Navigation.vue 的 doCallback方法调用
 */
const navChange = (data) => {
    const {curFolder} = data;
    currentFolder.value = curFolder;   //更新当前所在目录
    filePid.value = curFolder.fileId;  //更新父id
    loadAllFolder();
}

</script>

<style lang="scss" scoped>
.navigation-panel {
    padding-left: 10px;
    background: #f1f1f1;
}
.folder-list {
    .folder-item {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 10px;
        .file-name {
            display: inline-block;
            margin-left: 10px;
        }
        &:hover {
            background: #f8f8f8;
        }
    }
    max-height: calc(100vh - 200px);
    min-height: 200px;
}
.tips {
    text-align: center;
    line-height: 200px;
    span {
        color: #06a7ff;
    }
}
</style>